<template>
  <div class="content">
    <el-row :gutter="gutterNum">
      <el-col :span="6">
        <div class="content_left">
          <div class="content_title">原油(美元/桶)</div>

          <div class="content_card">
            <el-row :gutter="gutterNum">
              <el-col :span="6">
                <div style="text-align: center; padding-top: 10px">
                  <img class="content_img" :src="titlelogo" alt="" />
                </div>
              </el-col>
              <el-col :span="18">
                <div class="content_desc padd6">BRENT预测值</div>
                <div class="content_num">
                  $82.65 <span class="font_14">/桶</span>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="content_card" style="border-top: 1px solid #dedede">
            <el-row :gutter="gutterNum">
              <el-col :span="6">
                <div style="text-align: center; padding-top: 10px">
                  <img class="content_img" :src="titlelogo" alt="" />
                </div>
              </el-col>
              <el-col :span="18">
                <div class="content_desc padd6">BRENT预测值</div>
                <div class="content_num">
                  $82.65 <span class="font_14">/桶</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="content_card">
            <el-row>
              <el-col :span="12">
                <div class="textcenter border_right">
                  <div class="content_desc marginbtm_20">BRENT 涨跌</div>
                  <span class="content_arrow">
                    0.26 <i class="el-icon-top-right"></i>
                  </span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="textcenter">
                  <div class="content_desc marginbtm_20">BRENT 涨跌幅</div>
                  <span class="content_arrow">
                    0.32% <i class="el-icon-top-right"></i>
                  </span>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="content_card" style="border-top: 1px solid #dedede">
            <el-row :gutter="gutterNum">
              <el-col :span="6">
                <div style="text-align: center; padding-top: 10px">
                  <img class="content_img" :src="titlelogo" alt="" />
                </div>
              </el-col>
              <el-col :span="18">
                <div class="content_desc padd6">BRENT预测值</div>
                <div class="content_num">
                  $82.65 <span class="font_14">/桶</span>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="content_card">
            <el-row>
              <el-col :span="12">
                <div class="textcenter border_right">
                  <div class="content_desc marginbtm_20">BRENT 涨跌</div>
                  <span class="content_arrow_green">
                    0.26 <i class="el-icon-top-right"></i>
                  </span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="textcenter">
                  <div class="content_desc marginbtm_20">BRENT 涨跌幅</div>
                  <span class="content_arrow_green">
                    0.32% <i class="el-icon-top-right"></i>
                  </span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="content_right">
          <div>
            <el-row :gutter="gutterNum">
              <el-col :span="12">
                <el-row :gutter="gutterNum">
                  <el-col :span="12">
                    <div class="textcenter bgwhite card_big">
                      <div style="text-align: center">
                        <img class="content_img" :src="titlelogo" alt="" />
                      </div>
                      <div class="content_priamrydesc">天然气</div>
                      <div class="content_desc">JKM预测</div>
                      <div class="content_num">
                        $14.7 <span class="font_14">/百万英热</span>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="textcenter bgwhite card_big">
                      <div style="text-align: center">
                        <img class="content_img" :src="titlelogo" alt="" />
                      </div>
                      <div class="content_priamrydesc">天然气</div>
                      <div class="content_desc">JKM预测</div>
                      <div class="content_num">
                        $14.7 <span class="font_14">/百万英热</span>
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <div class="textcenter bgwhite card_big">
                  <div class="content_priamrydesc">国债利率-3月均值</div>
                  <div class="content_desc">美元兑人民币即期汇率</div>
                  <div class="content_card" style="padding: 18px 8px 0">
                    <el-row>
                      <el-col :span="12">
                        <div class="textcenter border_right">
                          <div class="content_desc">10年期美国国债利率(%)</div>
                          <div class="content_num">4.1304%</div>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="textcenter">
                          <div class="content_desc">10年期中国国债利率(%)</div>
                          <div class="content_num">2.7878%</div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div style="margin-top: 36px">
            <el-row :gutter="gutterNum">
              <el-col :span="16">
                <div class="content_title">成品油化工品</div>
                <div>
                  <el-row :gutter="gutterNum">
                    <el-col :span="8" v-for="(item, index) in 6" :key="index">
                      <div class="cardbox_rightimg bgwhite">
                        <img class="card_img" :src="titlelogo" alt="" />

                        <div
                          class="content_desc padd6"
                          style="margin-top: 30px"
                        >
                          

                          <span v-if="index === 0">汽油预测</span>
                          <span v-if="index === 1">柴油预测</span>
                          <span v-if="index === 2">PX预测</span>
                          <span v-if="index === 3">LPG预测</span>
                          <span v-if="index === 4">沥青预测</span>
                          <span v-if="index === 5">石脑油预测</span>

                        </div>
                        <div class="content_num">
                          9305 <span class="font_14">元/吨</span>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="content_title">海外油气投资风险评估</div>
                <div>
                  <el-row :gutter="10">
                    <el-col :span="12" v-for="(item, index) in 4" :key="index">
                      <div class="textcenter bgwhite square">
                        <div class="content_desc padd6">
                          <span
                            class="spot"
                            :class="`bgspot` + (index + 1)"
                          ></span>
                          <span v-if="index === 0">极高风险</span>
                          <span v-if="index === 1">高风险</span>
                          <span v-if="index === 2">中风险</span>
                          <span v-if="index === 3">低风险</span>
                        </div>
                        <div
                          class="content_num_nocolor"
                          :class="`fontcolor` + (index + 1)"
                        >
                          22 <span class="font_14">个国家</span>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
     
    <script>
export default {
  data() {
    return {
      gutterNum: 24,
      titlelogo: require("@/assets/img/logo.png"),
    };
  },
};
</script>
    <style >
body ::v-deep .v-modal {
  background-color: rgba(0, 0, 0, 1) !important;
}
</style> 
  <style scoped lang="less">
@linecolor: #dedede;

@color1: #fb4002;
@color2: #fa7846;
@color3: #ffad2f;
@color4: #0cd39a;

.bgwhite {
  background: #fff;
  border-radius: 6px;
}
.padd6 {
  padding: 6px 0;
}

.textcenter {
  text-align: center;
}
.marginbtm_20 {
  margin-bottom: 20px;
}
.border_right {
  border-right: 1px solid @linecolor;
}
.bgspot1 {
  background: @color1;
}
.bgspot2 {
  background: @color2;
}
.bgspot3 {
  background: @color3;
}
.bgspot4 {
  background: @color4;
}
.fontcolor1 {
  color: @color1;
}
.fontcolor2 {
  color: @color2;
}
.fontcolor3 {
  color: @color3;
}
.fontcolor4 {
  color: @color4;
}

.spot {
  height: 10px;
  width: 10px;
  display: inline-block;
  border-radius: 5px;
  margin-right: 5px;
}
.content {
  .content_title {
    border-bottom: 1px solid @linecolor;
    font-size: 16px;
    color: #000;
    font-weight: 700;
    padding: 12px 8px;
  }

  // height: 100vh;
  .content_left {
    height: 100%;
    border-radius: 10px;
    background: #fff;
  }
  .content_right {
    height: 100%;
    .cardbox_rightimg {
      position: relative;
      padding: 10px;
      margin: 10px 0;
      .card_img {
        height: 40px;
        width: 40px;
        position: absolute;
        right: 10px;
        // border-radius: 50%;
      }
    }
    .card_big {
      padding: 20px 0;
      border-radius: 5px;
      .content_desc {
        padding-bottom: 8px;
      }
    }
    .square {
      margin: 10px 0;
      padding: 25px 0;
    }
  }
  .content_img {
    height: 40px;
    width: 40px;
  }
  .content_desc {
    color: #888;
    font-size: 14px;
  }
  .content_priamrydesc {
    padding-top: 8px;
    color: #111;
    font-weight: 600;
    font-size: 14px;
  }
  .content_num {
    font-size: 20px;
    color: #000;
    font-weight: 700;
    .font_14 {
      font-size: 14px;
    }
  }
  .content_num_nocolor {
    font-size: 20px;
    font-weight: 700;
    .font_14 {
      color: #000;
      font-size: 14px;
    }
  }
  .content_card {
    padding: 10px 8px 20px;
  }
  .content_arrow {
    background: #fff1e9;
    color: #e97b5b;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: 5px;
  }
  .content_arrow_green {
    background: #defef3;
    color: #2dc8a1;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: 5px;
  }
}
</style>